<template>
  <div class="home-container">
    <Form :model="searchObj" inline="false">
      <FormItem>
        <Input v-model="searchObj.text" placeholder="菜单名称" />
      </FormItem>

      <FormItem label>
        <DatePicker
          type="date"
          placeholder="菜单创建时间"
          format="yyyy-MM-dd"
          @on-change="changeStartDate"
          :value="searchObj.startTime"
        ></DatePicker>-
        <DatePicker
          type="date"
          placeholder="菜单创建时间"
          format="yyyy-MM-dd"
          @on-change="changeEndDate"
          :value="searchObj.endTime"
        ></DatePicker>
      </FormItem>

      <FormItem>
        <Select v-model="searchObj.status" placeholder="是否禁用">
          <Option value="0">禁用</Option>
          <Option value="1">未禁用</Option>
        </Select>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="serach">搜索</i-button>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="resetSearch">重置</i-button>
      </FormItem>

      <FormItem>
        <!--条件-->
        <i-button type="primary" shape="circle" @click="addMenuFun(-1)" v-has="menu/insert">新增一级菜单</i-button>
      </FormItem>
    </Form>
    <div class="home-content">
      <i-table :columns="columns1" :data="data1"></i-table>
    </div>
    <Page
      :total="pageData.total"
      :current="pageData.current"
      :page-size="pageData.size"
      show-elevator
      show-total
      @on-change="changePage"
    ></Page>

    <!--详情子菜单页面-->
    <Modal v-model="openDig" title="菜单详情" @on-ok="ok" @on-cancel="cancel" width="1000px">
      <i-table :columns="columns1" :data="data1"></i-table>
    </Modal>

    <!--新增菜单页面-->
    <Modal v-model="addDig" title="新增菜单" @on-ok="ok" @on-cancel="cancel">
      <Form :model="menuObj" :label-width="80" ref="formCustom" :rules="ruleCustom">
        <FormItem label="菜单名称" prop="menuName">
          <Input v-model="menuObj.menuName" placeholder="菜单名称,不能和已存在菜单重名..." />
        </FormItem>

        <FormItem label="图标">
          <Select v-model="menuObj.type" style="width:100px" @on-change="changeIcon">
            <Option v-for="item in iconList" :value="item.type" :key="item.id">{{ item.type }}</Option>
          </Select>
        </FormItem>

        <FormItem label="路由跳转名称" v-if="firstMenu" prop="name">
          <Input v-model="menuObj.name" placeholder="路由跳转名称,请正确填写,否则路由加载不出来" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="addMenuForm(menuObj)" v-has="menu/insert">新增</Button>
        </FormItem>
      </Form>
    </Modal>

    <!--编辑菜单页面-->
    <Modal v-model="editDig" title="菜单编辑" @on-ok="ok" @on-cancel="cancel">
      <Form :model="menuObj" :label-width="80" ref="formCustom" :rules="ruleCustom">
        <FormItem label="菜单名称" prop="menuName">
          <Input v-model="menuObj.menuName" placeholder="菜单名称,不能和已存在菜单重名..." />
        </FormItem>

        <FormItem label="图标">
          <Select v-model="menuObj.type" style="width:100px" @on-change="changeIcon">
            <Option v-for="item in iconList" :value="item.type" :key="item.id">
              <Icon :type="item.type" />
            </Option>
          </Select>
        </FormItem>

        <FormItem label="路由跳转名称">
          <Input v-model="menuObj.name" placeholder="路由跳转名称,请正确填写,否则路由加载不出来" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="editMenuForm(menuObj)" v-has="menu/update">提交</Button>
        </FormItem>
      </Form>
    </Modal>

    <!--删除菜单是提醒页面-->
    <Modal
      v-model="delMenuDig"
      title="温馨提示"
      @on-ok="delOk"
      @on-cancel="delNo"
    >菜单必须没有关联角色才能删除,子菜单会全部删除</Modal>
  </div>
</template>

<script>
import {
  menuPage,
  addMenu,
  delById,
  moveMenu,
  updateMenu,
  getById
} from "@/api/menuAPi";
import { dealPageData } from "@/utils/myPageUtil";
import { formatDate } from "@/utils/dateUtil";
import { iconList } from "@/api/iconApi";
import { Button } from "iview";
export default {
  name: "menu",
  //用于刷新页面
  inject: ["reload"],
  data() {
    return {
      searchObj: {
        text: "",
        startTime: "",
        endTime: ""
      },
      iconModel: "", // 图标
      iconList: [], //图标list
      parentId: -1, //给添加子菜单使用
      openDig: false, //详情页面对话框
      addDig: false, //新增对话框
      firstMenu: false,
      delMenuDig: false, //删除菜单对话框
      menuId: -1, //删除菜单时选择的菜单id
      editDig: false, //编辑菜单页面
      menuObj: {
        menuName: "", //菜单名称
        parentId: -1, //上级菜单id
        type: "", //iview icon图标
        name: "", //路由跳转名称
        id: 0 //菜单id
      },
      /*表单校验*/
      ruleCustom: {
        menuName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "跳转的路由不能为空", trigger: "blur" }
        ]
      },
      pageData: {
        total: 0,
        current: 1,
        size: 10,
        data: []
      },
      columns1: [
        {
          title: "菜单名称",
          key: "text"
        },
        {
          title: "图标",
          key: "type",
          render: (h, params) => {
            return h("div", [
              h("icon", {
                props: {
                  type: params.row.type,
                  size: 25
                }
              })
            ]);
          }
        },
        {
          title: "排序",
          key: "sort"
        },
        {
          title: "是否禁用",
          key: "delFlag",
          render: (h, params) => {
            if (params.row.delFlag == 1) {
              return h("span", "未禁用");
            } else {
              return h("span", "禁用中");
            }
          }
        },
        {
          title: "创建时间",
          key: "createDate",
          render: (h, params) => {
            return h(
              "div",
              formatDate(new Date(params.row.createDate), "yyyy-MM-dd hh:mm")
            );
          }
        },
        {
          title: "修改时间",
          key: "modifyDate",
          render: (h, params) => {
            return h(
              "div",
              formatDate(new Date(params.row.modifyDate), "yyyy-MM-dd hh:mm")
            );
          }
        },
        {
          title: "排序",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.moveSort(true, params.row.id, params.row.parentId);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "menu/moveSort"
                    }
                  ]
                },
                "上移"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.moveSort(false, params.row.id, params.row.parentId);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "menu/moveSort"
                    }
                  ]
                },
                "下移"
              )
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.show(params.row.id);
                    }
                  }
                },
                "菜单详情"
              ),
              h(
                Button,
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.addMenuFun(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "menu/insert"
                    }
                  ]
                },
                "添加子菜单"
              ),
              h(
                Button,
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.editMenuFun(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "menu/update"
                    }
                  ]
                },
                "编辑"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "menu/delById"
                    }
                  ]
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  methods: {
    serach() {
      //搜索
      this.searchObj.current = 1;
      this.searchObj.size = this.pageData.size;
      menuPage(this.searchObj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    resetSearch() {
      this.searchObj = {};
    },
    show(parentId) {
      //请求数据
      menuPage({
        size: this.pageData.size,
        current: this.pageData.current,
        parentId: parentId
      }).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
      //打开对话框
      this.openDig = true;
    },
    remove(id) {
      this.$Message.info("删除菜单", id);
      this.delMenuDig = true;
      //保存菜单id
      this.menuId = id;
    },
    ok() {
      this.$Message.info("点击了确定");
      //刷新当前页面,保证数据表单数据清空
      this.reload();
    },
    cancel() {
      this.$Message.info("点击了取消");
      //刷新当前页面,保证数据表单数据清空
      this.reload();
    },
    //新增菜单表单提交
    addMenuForm(menuObj) {
      this.$refs.formCustom.validate(valid => {
        if (valid) {
          menuObj.parentId = this.parentId;
          addMenu(menuObj).then(res => {
            if (res.data.code == 200) {
              //关闭当前页面,同时刷新主页面
              this.addDig = false;
              this.reload();
            } else {
              this.$Message.error(res.data.msg);
            }
          });
        } else {
          this.$Message.error("必填项缺少!!");
        }
      });
    },
    //编辑菜单表单提交
    editMenuForm(menuObj) {
      this.$refs.formCustom.validate(valid => {
        if (valid) {
          updateMenu(menuObj).then(res => {
            if (res.data.code == 200) {
              //关闭当前页面,同时刷新主页面
              this.addDig = false;
              //清空菜单信息
              this.menuObj = {};
              this.reload();
            }
          });
        } else {
          this.$Message.error("必填项缺少!!");
        }
      });
    },
    addMenuFun(id) {
      let that = this;
      //查询iconList
      iconList().then(res => {
        if (res.data.code == 200) {
          res.data.data.forEach(item => {
            let obj = {};
            obj.type = item.type;
            obj.id = item.id;
            that.iconList.push(obj);
          });
        }
      });
      //赋值parentId
      this.parentId = id;
      //打开对话框
      this.addDig = true;
      if (id != -1) {
        //非一级菜单,需要显示表单路由元素
        this.firstMenu = true;
      }
    },
    editMenuFun(id) {
      let that = this;
      //查询iconList
      iconList().then(res => {
        if (res.data.code == 200) {
          res.data.data.forEach(item => {
            let obj = {};
            obj.type = item.type;
            obj.id = item.id;
            that.iconList.push(obj);
          });
        }
      });
      this.editDig = true;
      //查询菜单信息
      this.$Message.info(id);
      getById(id).then(res => {
        if (res.data.code == 200) {
          //回显菜单信息
          this.menuObj.id = res.data.data.id;
          this.menuObj.parentId = res.data.data.parentId;
          this.menuObj.menuName = res.data.data.text;
          this.menuObj.type = res.data.data.type;
          this.menuObj.name = res.data.data.name;
        }
      });
    },
    delOk() {
      //删除
      delById(this.menuId).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("删除成功");
          //重新加载页面
          this.reload();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    delNo() {
      this.$Message.info("取消删除");
    },
    moveSort(flag, id, parentId) {
      moveMenu(flag, id, parentId).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("移动菜单排序成功");
          //重新加载页面
          this.reload();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    //分页改变
    changePage(index) {
      this.searchObj.current = index;
      this.searchObj.size = this.pageData.size;
      this.searchObj.parentId = -1;
      menuPage(this.searchObj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    changeIcon(value) {
      this.$Message.info(value);
    },
    changeStartDate(value) {
      this.searchObj.startTime = value;
    },
    changeEndDate(value) {
      this.searchObj.endTime = value;
    }
  },
  created: function() {
    // `this` 指向 vm 实例
    menuPage({
      size: this.pageData.size,
      current: this.pageData.current,
      parentId: -1
    }).then(res => {
      if (res.data.code == 200) {
        //处理分页
        this.pageData = dealPageData(res.data);
        this.data1 = this.pageData.data;
      } else {
        this.$Message.error(res.data.msg);
      }
    });
  }
};
</script>

<style scoped>
.home-container {
  padding: 10px;
  padding-top: 5px;
}
.home-content {
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}
</style>
